import { Component, OnInit,Input,Output,EventEmitter , ElementRef,ViewChild,ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'el-button',
  templateUrl: './el-button.component.html',
  styleUrls: ['./el-button.component.css','./button.css'],
  encapsulation:ViewEncapsulation.None
})
export class ElButtonComponent implements OnInit {

    @Input() type:string='default';
    @Input() size:string;
    @Input() icon:string='';
    @Input() loadding:boolean;
    @Input() disabled:boolean;
    @Input() plain:boolean;
    @Input() autofocus:boolean;

    @Output() clickHandler:EventEmitter<any>=new EventEmitter<any>();

    @ViewChild('self') self:ElementRef
    @ViewChild('icon_i') icon_i:ElementRef

    constructor() { }

    ngOnInit() {
    }
    

    atClick(e){
        this.clickHandler.emit(e)
    }
    ngOnChanges(){
        this.setClass()
    }

    setClass(){
        var classList=['el-button'];

        ['type','size'].forEach(ele=>{
            if(this[ele]){
                classList.push(`el-button--${this[ele]}`)
            }
        });
        ['disabled','loadding','plain'].forEach(ele=>{
            if(this[ele]){
                classList.push(`is-${ele}`)
            }
        })

        this.self.nativeElement.className=classList.join(' ');

        var icon_class=`el-icon-${this.icon}`;
        // this.icon_i.nativeElement.className=icon_class
    }

}
